<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>login</title>
    <link rel="stylesheet" href="./css/注册登入.css">
    <script src="./js/jquery.js"></script>
    <script src="./js/axios.js"></script>

</head>

<body>
    <style>
        a {
            color: #029789;
            text-decoration: none;
        }

        body {

            overflow: hidden;
            background: url("./img/1652849830071.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            opacity: 0.9;
        }

        .main {
            width: 480px;
            height: 380px;
            padding: 30px 10px 10px 10px;
            margin: 11% auto;
        }

        .login-box {
            width: 340px;
            height: 305px;
            margin: auto;
        }

        .title {
            text-align: center;
            font-size: 24px;
            font-weight: 500;
            margin-bottom: 50px;
        }

        .account,
        .pwd {
            text-align: center;
        }

        .login-button {
            width: 315px !important;
            display: block !important;
            margin: 5px auto;
        }

        .forget {
            position: relative;
            left: 15px;
        }

        .register {
            position: relative;
            left: 215px;
        }

        .main {
            background: rgb(250, 250, 250);
        }
    </style>

    <div id="all">
        <div class="wrapper-login">
            <div class="header"></div>
            <div class="main">
                <div class="login-box">
                    <div class="title">HI账户登录</div>

                    <form action="" id="fd">
                        <input type="text" autofocus name="account" class="account zp-input" placeholder="手机号">
                        <input type="password" name="pwd" class="pwd zp-input" placeholder="密码">
                    </form>

                    <button class="btn login-button" id="btnn">登录</button>
                    <a href="./Forgotpassword.html" class="forget">忘记密码?</a>
                    <a href="./enroll.html" class="register">注册</a>
                </div>
            </div>

        </div>
    </div>

    <script>
        $(function () {
            $("#btnn").on("click", () => {
                //判断手机号为空
                if (($(".account").val()) == '') {
                    alert("手机号不能为空")
                }
                else{
                    var poh = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
                    if (!poh.test($(".account").val())) {
                        alert('请输入正确的手机号')
                        return;
                    }
                }
              //判断密码是否空，还有是否有8-16位
              if (($(".pwd").val()) == '') {
                    alert("密码不能为空")
                } else {
                    const $passus = /^\w{8,16}$/;
                    if (!$passus.test($(".pwd").val())) {
                        alert("请输入8-16位密码");
                        return
                    }
                }
               
                //调用接口
                $.ajax({
                    type: "post",
                    url: "http://127.0.0.1:3001/api/sign",
                    data: { user_name: $(".account").val(), password: $(".pwd").val() },
                    success: function (res) {
                        if (res.status==1) {
                            console.log(res.message);
                        } 
                        window.location.href = "shoppin.html";
                    }
                })

            }) 
        })



    </script>
</body>

</html>